<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">设备名称</div>
                <el-input v-model="search.device_name" placeholder="请输入设备名称" @click="openDev" readonly></el-input>
                <div class="search-input">点检日期</div>
                <el-date-picker v-model="search.time" :value-format="'YYYY-MM'" type="month" placeholder="请选择月份" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <div class='products' style="width: 100%;border: 1px solid #ebeef5;color:#606266;background:#FFF;line-height: 28px;">
                <div class='custom-table'>
                    <!-- 表头 -->
                    <div class='custom-th' style='display:flex;border-bottom: 1px solid #ebeef5;line-height: 28px;'>
                        <div class='fontCenter right' style="width:30%;"><span>设备名称</span></div>
                        <div class='fontCenter right' style="width:10%;" v-if="detail.device"><span>{{detail.device.title}}</span></div>
                        <div class='fontCenter right' style="width:10%;" v-else><span></span></div>
                        <div class='headerTitle' style="width: 10%;"><span>设备编号</span></div>
                        <div class='headerTitle' style="width: 10%;" v-if="detail.device"><span>{{detail.device.code}}</span></div>
                        <div class='headerTitle' style="width: 10%;" v-else><span></span></div>
                        <!-- <div class='headerTitle' style="width: 10%;"><span>表单编号</span></div>
                        <div style="width: 10%;text-align:center"><span>54154556</span></div> -->
                    </div>
                    <!-- 内容头 -->
                    <div class='custom-th' style='display:flex;'>
                        <div class='fontCenter' style="width:3%;"><span>项目</span></div>
                        <div class='fontCenter left' style="width:14%;"><span>点检内容</span></div>
                        <div class='fontCenter right left' style="width:13%;"><span>点检标准</span></div>
                        <div class='center' style="width: 70%;text-align: center;">
                            <div style="padding:11px 8px;text-align:center">点检日期({{search.time}})</div>
                            <div style="display: flex;justify-content:space-between;" v-if="detail.device">
                                <div class='map' v-for="(item,index) in detail.table" :key="index"><span>{{item.value}}</span></div>
                            </div>
                            <div style="display: flex;justify-content:space-between;" v-else>
                                <div class='map' v-for="(item,index) in monthList" :key="index"><span>{{item.date}}</span></div>
                            </div>
                        </div>
                    </div>
                    <!-- 内容体 -->
                    <div v-if="detail.device">
                        <div class='custom-th' style='display:flex;' v-for="(item1,index1) in detail.item" :key="index1">
                            <div class='fontCenter right' style="width:17%;border-top: 1px solid #ebeef5;"><span>{{item1.title}}</span></div>
                            <div class='fontCenter' style="width:13%;border-top: 1px solid #ebeef5;"><span>{{item1.con}}</span></div>
                            <div class='center left' style="width: 70%;text-align: center;">
                                <div style="display: flex;justify-content:space-between;">
                                    <div class='map' v-for="(item2,index2) in detail.table" :key="index2"><span v-if="item1[item2.field].type==1">{{item1[item2.field].value}}</span>
                                        <span v-if="item1[item2.field].type==2">{{item1[item2.field].sta==1?'√':'✗'}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 内容尾 -->
                        <div class='custom-th' style='display:flex;line-height: 28px;'>
                            <div class='fontCenter' style="width:30%;border-top: 1px solid #ebeef5;"><span>点检人员</span></div>
                            <div class='center left' style="width: 70%;text-align: center;">
                                <div style="display: flex;justify-content:space-between;">
                                    <div class='map' v-for="(item4,index4) in detail.table" :key="index4"><span>{{detail.user[item4.field]}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
    <device-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></device-list>
</template>

<script>
import deviceList from '@/views/device/deviceList.vue'
    export default {
  components: { deviceList },
        data() {
            return {
                mainData:this.$API.device.ProjectLog.lists,//保养记录
                search:{
                    device_name:null,
                    time:null,
                    device_id:null
                },
                dialog:{
                    save:false
                },
                detail:{},
                monthList:[],
            }
        },
        mounted () {
            this.month()
        },
        methods: {
            month(){
                var currentDate = new Date();
                var currentYear = currentDate.getFullYear();
                var currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，所以要加 1
                this.search.time = currentYear + '-' + (currentMonth < 10 ? '0' : '') + currentMonth;
                var monthData = [];
                if(currentMonth === 1 || currentMonth === 3 || currentMonth === 5 || currentMonth === 7 || currentMonth === 8 || currentMonth === 10 || currentMonth === 12){
                    for (var i = 1; i <= 31; i++) {
                        var tenDay = this.dayS(i)
                        var yes = tenDay;
                        monthData.push({ date: yes});
                    }
                }else{
                    for (var a = 1; a <= 30; a++) {
                        var dayTen = this.dayS(a)
                        var no = dayTen;
                        monthData.push({ date: no});
                    }
                }
                this.monthList  = monthData
            },
            dayS(number){
                if (number < 10) {
                    return "0" + number;
                } else {
                    return number.toString();
                }
            },
            // 选择设备
            openDev(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('add')
                })
            },
            handleSuccess(data) {
                this.search.device_name = data[0].title
                this.search.device_id = data[0].id
                this.upsearch()
            },
            // 查询
            async upsearch(){
                let query = {
                    month:this.search.time,
                    device_id:this.search.device_id
                }
                var res = await this.$API.jiankong.deviceTable.post(query);
                this.detail = res.data
            },
        },
    }
</script>

<style lang="scss" scoped>
.fontCenter{
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ebeef5;
}
.headerTitle{
    text-align:center;
    border-right: 1px solid #ebeef5
}
.map{
    border-top: 1px solid #ebeef5;
    padding:5px 0;
    text-align:center;
    //width:100%;
    width: 50px;
    overflow: auto;
    border-right: 1px solid #ebeef5;
}
.right{
    border-right: 1px solid #ebeef5;
}
</style>